import React, { Component } from 'react';
import { Alert, Button, message, Switch } from 'antd';
import { messages } from 'share/common';
import { connect } from 'react-redux';
import invoiceManagementService from '../invoice-management.service';
import InvoiceInspection from './invoice-Inspection';

class SupplierInvoice extends Component {
  constructor(props) {
    super(props);
    this.state = {
      invoiceType: [
        {
          key: 'weChat',
          name: messages('supplier.key614')/*微信电子发票*/,
          desc: messages('setting.key760'/*启用后可在账本和报销单中导入微信卡包中的电子发票*/),
          checked: true,
          code: 'app.expense.import.electronic.invoice.disabled',
        },
        {
          key: 'AliPay',
          name: messages('supplier.key615')/*支付宝发票*/,
          desc: messages('supplier.key616')/*启用后可在账本和报销单中导入支付宝卡包中的发票*/,
          checked: true,
          code: 'app.expense.import.alipay.invoice.disabled.tmp.expire',
        },
        {
          key: 'Email',
          name: messages('supplier.key617')/*邮箱导入发票*/,
          desc: messages('supplier.key618')/*启用后可在账本和报销单中导入汇联易邮箱中的电子发票*/,
          checked: true,
          code: 'Email.Import.Enable',
        }
      ],
      systemProfileMap: {},//系统返回的FunctionProfile
    };
  };

  componentWillMount() {
    this.checkElectronic();
  };
  
  //是否启用电子发票
  checkElectronic = () => {
    let { invoiceType, systemProfileMap } = this.state;
    const { tenantMode } = this.props;
    invoiceManagementService.getProfileInfo(tenantMode)
      .then((resp) => {
        if (tenantMode) {
          systemProfileMap = resp.data;
        } else {
          systemProfileMap = resp.data.profileDetail;
        }
        this.setState({systemProfileMap});
        invoiceType[0].checked = !systemProfileMap['app.expense.import.electronic.invoice.disabled'];
        invoiceType[1].checked = !!systemProfileMap['app.expense.import.alipay.invoice.disabled.tmp.expire'];
        invoiceType[2].checked = !!systemProfileMap['Email.Import.Enable'];
        invoiceType.map(item => {
          if (systemProfileMap[item.code] === null || systemProfileMap[item.code] === undefined) {
            item.checked = false;
          }
        });
        this.setState({invoiceType});
        this.handleTriggerChange();
      });
  };

  handleTriggerChange = () => {
    const { invoiceType } = this.state;
    this.props.onChange({
      weChatInvoiceDisabled: invoiceType[0].checked,
      aliPayInvoiceDisabled: invoiceType[1].checked,
      emailInvoiceDisabled: invoiceType[2].checked
    });
  };
  
  handleChangeInvoiceType = (key) => {
    let { invoiceType } = this.state;
    const { tenantMode } = this.props;
    invoiceType.map(item => {
      if (item.key === key) item.checked = !item.checked;
    });
    this.setState({ invoiceType });
    let profiles = [
      {
        "key": 'app.expense.import.electronic.invoice.disabled',
        "value": !invoiceType[0].checked
      }, {
        "key": 'app.expense.import.alipay.invoice.disabled.tmp.expire',
        "value": invoiceType[1].checked
      }, {
        "key": 'Email.Import.Enable',
        "value": invoiceType[2].checked
      }
    ];
    let profilesChanged = [];
    invoiceType.map(item => {
      if (item.key === key) {
        profiles.map(element => {
          if (item.code === element['key']) {
            profilesChanged.push(element);
          }
        })
      }
    });
    let params = {
      "scope": tenantMode ? "tenant" : "company",
      "profiles": profilesChanged
    };
    invoiceManagementService.saveProfile(params)
      .then((resp) => {
        if (resp.status === 200) {
          message.success(messages('common.operate.success')/*操作成功*/);
          this.handleTriggerChange();
        }
      })
      .catch((error) => {
        message.error(messages('common.operate.filed')/*操作失败*/);
      });
  };
  
  render() {
    const { invoiceType } = this.state;
    return (
      <div className="table-header-api">
        {
          invoiceType.map(item => {
            return (
              <div className="check-and-tips">
                <div className="setting">
                  <span className="tips">{item.name}</span>
                  <div className="setting-tips">
                    <Switch checked={item.checked}
                            className="setting-button cur"
                            onChange={value => this.handleChangeInvoiceType(item.key)}
                    />
                    <span className="setting-name">
                      {item.checked ? messages('common.status.enable')/*启用*/ : messages('common.status.disable')/*禁用*/}
                    </span>
                  </div>
                </div>
                <div className="small-tips">{item.desc}</div>
              </div>
            );
          })
        }
      </div>
    );
  }
}

InvoiceInspection.propTypes = {
  onChange: React.PropTypes.func // 同步状态
};

function mapStateToProps(state) {
  return {
    tenantMode: state.main.tenantMode,
  };
}

export default connect(mapStateToProps)(SupplierInvoice);

